<template>
  <common-card title="累计用户数" :value="numberFormat(usersTotal)">
    <v-chart :option="getOption()" autoresize />
    <template #bottom>
      <span>日同比</span>
      <span class="emphasis">{{ userGrowthLastDay }}%</span>
      <span>月同比</span>
      <span class="emphasis">{{ userGrowthLastMonth }}%</span>
    </template>
  </common-card>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useDataStore } from "@/stores/echartsData";
import useFormat from "@/hooks/useFormat";
// 实例化仓库
const dataStore = useDataStore();

const usersTotal = ref<number>(0);
const usersLastMonth = ref<number>(0);
const userGrowthLastDay = ref<string>("");
const userGrowthLastMonth = ref<string>("");

const getOption = () => {
  return {
    tooltip: {
      trigger: "axis",
    },
    grid: {
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    },
    xAxis: {
      show: false,
      min: 0,
      max: usersTotal.value,
      boundaryGap: 0,
    },
    yAxis: {
      show: false,
      data: ["本月"],
    },
    series: [
      {
        name: "用户增长量",
        type: "bar",
        data: [usersTotal.value - usersLastMonth.value],
        showBackground: true,
        // 设置背景颜色
        backgroundStyle: {
          color: "#eee",
        },
        itemStyle: {
          color: {
            type: "linear",
            x: 1, //右
            y: 0, //下
            x2: 0, //左
            y2: 0, //上
            colorStops: [
              {
                offset: 0,
                color: "#83bff6", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#188df0", // 100% 处的颜色
              },
            ],
          },
        },
        // 柱子宽度
        barWidth: 10,
        label: {
          show: true,
          formatter: "|",
          position: "right",
          color: "skyblue",
        },
      },
    ],
  };
};
// 数据格式化
const { numberFormat } = useFormat();
// 对数据进行监控
watch(dataStore, (newVal) => {
  usersTotal.value = newVal.reportData.usersTotal as number;
  usersLastMonth.value = newVal.reportData.usersLastMonth as number;
  userGrowthLastDay.value = newVal.reportData.userGrowthLastDay as string;
  userGrowthLastMonth.value = newVal.reportData.userGrowthLastMonth as string;
});
</script>
<script lang="ts">
export default {
  name: "TotalUsers",
};
</script>
